<template>
	<view class="contont">
		<nav-bar :title="title" :iconLeft="true" />
		<view class="content-bgc">
			<custom-list-de :record="detail_record" :columns="columns">
				<template #picture="{ text }">
					<image v-for="value in text" :src="value" class="preview-img" @click="previewImage(value)" />
				</template>
				<template #status_display="{ text, record }">
					<up-tag v-if="text == '待接单'" size="mini" :text="text" type="primary" plain plainFill />
					<up-tag v-if="text == '维修中'" size="mini" :text="text" type="warning" plain plainFill />
					<up-tag v-if="text == '已完成'" size="mini" :text="text" type="success" plain plainFill />
					<up-tag v-if="text == '已取消'" size="mini" :text="text" type="error" plain plainFill />
				</template>
			</custom-list-de>
			<view class="b-con" v-if="waitType == 'wait'">
				<uni-forms :model="form" :rules="rules" ref="refForm" label-width="100px">
					<uni-forms-item label="维修人姓名" name="task_full_name" required>
						<uni-easyinput v-model="form.task_full_name" placeholder="请输入维修人姓名" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="联系方式" name="task_phone" required>
						<uni-easyinput v-model="form.task_phone" placeholder="请输入联系方式" class="iptBor" :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="维修详情">
						<uni-easyinput v-model="form.repair_details" type="textarea" placeholder="请输入维修详情" />
					</uni-forms-item>
					<uni-forms-item label="附件">
						<uni-file-picker v-model="form.file_urls" file-mediatype="image" file-extname="png,jpg,jpeg"
							@select="select" title="只能上传jpg/png/jpeg文件，且建议大小不超过2M"></uni-file-picker>
					</uni-forms-item>
					<u-button type="primary" text="提交" @click="save" />
				</uni-forms>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import deRepairApi from '../../../api/device/de_repair'
import { BASE_URL } from '../../../common/request';
const detail_record = ref({})
const title = '待维修详情';
const waitId = ref('')
const waitType = ref('')
onLoad(option => {
	get_detail(option.id);
	waitId.value = option.id
	waitType.value = option.type
})

const columns = [
	{ title: "照片", dataIndex: 'picture', scopedSlots: 'picture' },
	{ title: "编号", dataIndex: 'code' },
	{ title: "维修主题", dataIndex: 'title' },
	{ title: "状态", dataIndex: 'status_display', scopedSlots: 'status_display' },
	{ title: "维修设备", dataIndex: 'device_name' },
	{ title: "提交人", dataIndex: 'create_full_name' },
	{ title: "创建时间", dataIndex: 'create_date' },
	{ title: "接单时间", dataIndex: 'task_date' },
	{ title: "完成时间", dataIndex: 'finish_date' },
	{ title: "取消时间", dataIndex: 'close_date' },
	{ title: "故障描述", dataIndex: 'fault_description', note: true },
]

function get_detail(id) {
	deRepairApi.repair_detail(id).then(data => {
		detail_record.value = data
		detail_record.value.picture = data.file_urls.split(',')
	})
}

const refForm = ref(null);
const form = reactive({
	task_full_name: '',
	task_phone: null,
	repair_details: '',
	file_urls: []
});
const rules = {
	task_full_name: { rules: [{ required: true, errorMessage: '请输入维修人姓名' }] },
	task_phone: { rules: [{ required: true, errorMessage: '请输入联系方式' }] },
};


// 上传
const action = BASE_URL + '/file/';
const token = uni.getStorageSync("assecss_token");
function select({ tempFiles }) {
	uni.uploadFile({
		url: action, //
		filePath: tempFiles[0].path,
		name: 'file',
		header: {
			'Authorization': "JWT " + token
		},
		success: (files) => {
			const data = JSON.parse(files.data)
			form.file_urls.push({
				name: 'file.txt',
				extname: "txt",
				url: data.file,
			})
		},
		fail: (err) => {
			uni.$u.toast('上传图片失败')
		}
	});
};

//提交表单
function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		params.file_urls = params.file_urls.map(v => v.url).join(',')
		const data = {
			status: 3,
			record_info: JSON.stringify(params)
		}
		deRepairApi.patch_repair(data, waitId.value).then((res) => {
			uni.$u.toast('修改成功')
			setTimeout(() => {
				backRefsh();
			}, 1000)
		})

	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})

}

const previewImage = (img) => {
	// uniapp 原生预览图片方法
	uni.previewImage({
		current: img.url || img,  // 当前显示图片
		urls: [img.url || img]    // 图片列表
	})
}

//返回上一级并刷新上一级页面
function backRefsh() {
	uni.navigateBack({
		delta: 1, // 返回的页面层数，1 表示返回上一级
		success: () => {
			uni.$bus.useBusEmit('de_wait');
		}
	})
};
</script>

<style lang="scss"></style>